<template>

    <c-main-template title="企业认证" :isBreadcrumb="false">
        <el-form class="pd-20" label-width="auto" label-position="left" ref="ruleFormRef" :model="ruleForm" :rules="rules">
            <el-row :gutter="24" v-loading="loading">
                <!-- 状态 -->
                <el-col :span="24" v-if="ruleForm.authStatus === 1">
                    <el-alert class="mb-30" title="平台审核中，请耐心等待。" type="warning" show-icon />
                </el-col>
                <el-col :span="24" v-else-if="ruleForm.authStatus === 2">
                    <el-alert class="mb-30" title="恭喜您通过企业认证！" type="success" show-icon />
                </el-col>
                <el-col :span="24" v-else-if="ruleForm.authStatus === 3">
                    <el-alert class="mb-30" :title="`审核未通过，驳回原因：${ruleForm.remarks}`" type="error" show-icon />
                </el-col>
                <!-- 企业信息 -->
                <el-col :span="24">
                    <div class="title">企业信息</div>
                </el-col>
                <el-col :span="24" class="mr-30 ml-30 mt-sm">
                    <el-col :span="9">
                        <el-form-item label="企业名称" prop="name">
                            <div class="flex-y-center wh">
                                <el-input :disabled="disabled" class="flex-1" :class="disabled || 'denterprise-name'" placeholder="请输入企业名称" size="large" v-model="ruleForm.name" @blur="onDraftSave" />
                                <div v-if="!disabled" class="enterprise-select flex-center pointer" @click="handleSelectByName()">
                                    查询
                                </div>
                                <el-tooltip v-if="!disabled" effect="dark" content="输入企业全称，可自动带出以下企业信息" placement="right">
                                    <div class="enterprise-img ml-sm flex-center pointer">
                                        <img src="@/assets/img/help.png" />
                                    </div>
                                </el-tooltip>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="统一社会信用代码" prop="creditno">
                            <el-input :disabled="disabled" placeholder="请输入统一社会信用代码" size="large" v-model="ruleForm.creditno" @blur="onDraftSave" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="企业类型" prop="type">
                            <el-select v-model="ruleForm.type" placeholder="请输入企业类型" size="large" class="wh" :disabled="disabled" @blur="onDraftSave">
                                <el-option v-for="item in enterpriseType" :key="item.value" :label="item.label" :value="item.label" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="9">
                        <el-form-item label="法人" prop="legal">
                            <el-input placeholder="请输入法人" size="large" :disabled="disabled" v-model="ruleForm.legal" @blur="onDraftSave" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="邮箱" prop="email">
                            <el-input placeholder="请输入邮箱" size="large" :disabled="disabled" v-model="ruleForm.email" @blur="onDraftSave" />
                            <el-tooltip effect="dark" content="请输入常用邮箱，用来接收签约邮件" placement="right" v-if="!disabled">
                                <div class="enterprise-img ml-sm flex-center pointer">
                                    <img src="@/assets/img/help.png" />
                                </div>
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="联系电话" prop="mobile">
                            <el-input placeholder="请输入联系电话" size="large" :disabled="disabled" v-model="ruleForm.mobile" @blur="onDraftSave" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="注册资本" prop="registerCapital">
                            <el-input placeholder="请输入注册资本" size="large" :disabled="disabled" v-model="ruleForm.registerCapital" @blur="onDraftSave">
                                <template #append>万元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="成立日期" prop="establishDate">
                            <el-date-picker v-model="ruleForm.establishDate" type="date" :disabled="disabled" value-format="YYYY-MM-DD" class="wh" placeholder="请选择成立日期" size="large" @blur="onDraftSave" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="注册地址" prop="addressDetails">
                            <el-input :disabled="disabled" v-model="ruleForm.addressDetails" :autosize="{ minRows: 4, maxRows: 5 }" type="textarea" placeholder="请输入注册地址" @blur="onDraftSave" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="经营范围" prop="businessScope">
                            <el-input :disabled="disabled" v-model="ruleForm.businessScope" :autosize="{ minRows: 4, maxRows: 5 }" type="textarea" placeholder="请输入经营范围" @blur="onDraftSave" />
                        </el-form-item>
                    </el-col>
                </el-col>

                <el-col :span="24">
                    <div class="title">上传文件</div>
                </el-col>

                <el-col :span="24" class="mr-30 ml-30 mt-sm">
                    <el-col :span="9">
                        <el-form-item label="营业执照" prop="certificatePicPath">
                            <div class="mb-sm upload_tips">
                                仅支持.png、.jpg，且大小不超过500KB
                            </div>
                            <div class="flex">
                                <c-business-license :disabled="disabled" @update:modelValue="onDraftSave" v-model="ruleForm.certificatePicPath" />
                                <div class="living-example ml-lg">
                                    <div class="living-example_img">
                                        <img src="@/assets/img/shilietu_hengxiang.png" />
                                    </div>
                                    <div class="living-example_title mt-sm">示例图</div>
                                </div>
                                <div class="living-example ml-lg">
                                    <div class="living-example_img">
                                        <img src="@/assets/img/shilietu_zongxiang.png" />
                                    </div>
                                    <div class="living-example_title mt-sm">示例图</div>
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item class="mt-30" label="印章样本" prop="certificatePicPath">
                            <div>
                                <div class="mb-sm upload_tips">
                                    仅支持.png、.jpg，且大小不超过500KB
                                </div>
                                <div class="flex">
                                    <div class="seal-sample">
                                        <div class="seal-sample_upload">
                                            <c-business-license :disabled="disabled" @update:modelValue="onDraftSave" v-model="ruleForm.certificatePicPath1" />
                                        </div>
                                        <div class="seal-sample_title">公司章模</div>
                                    </div>
                                    <div class="seal-sample">
                                        <div class="seal-sample_upload">
                                            <c-business-license :disabled="disabled" @update:modelValue="onDraftSave" v-model="ruleForm.certificatePicPath1" />
                                        </div>
                                        <div class="seal-sample_title">授权委托人签字</div>
                                    </div>
                                    <div class="seal-sample">
                                        <div class="seal-sample_upload">
                                            <c-business-license :disabled="disabled" @update:modelValue="onDraftSave" v-model="ruleForm.certificatePicPath1" />
                                        </div>
                                        <div class="seal-sample_title">法定代表人人名章章模</div>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label=" ">
                            <div>
                                <div class="mb-sm upload_tips">
                                    请您按要求剪切您的印章扫描图像：长宽比例1:1并且让印章图像占满整个区域
                                </div>
                                <div class="flex">
                                    <div class="seal-sample">
                                        <div class="seal-example_img">
                                            <img src="@/assets/img/success-yinzhang.png" />
                                        </div>
                                        <div class="seal-sample_title">正确示例图</div>
                                    </div>
                                    <div class="seal-sample">
                                        <div class="seal-example_img">
                                            <img src="@/assets/img/error-yinzhang.png" />
                                        </div>
                                        <div class="seal-sample_title">正确示例图</div>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-col>
                <!-- 0-未认证，1-认证中，2-已认证，3=已驳回 -->
                <el-col :span="24" class="ml-30 mt-40 mb-sm" v-if="ruleForm.authStatus !== 1">
                    <div class="flex-y-center">
                        <div class="el-checkbox" @click="handleOpenManual">
                            <div :class="ruleForm.manual ? 'is-checked' : ''" class="el-checkbox__input">
                                <div class="el-checkbox__inner"></div>
                            </div>
                            <div class="el-checkbox__label">同意《企业认证协议》</div>
                        </div>
                        <div class="save-time" v-if="time">已保存 {{ time }}</div>
                    </div>
                    <div class="mt-lg mr-30">
                        <el-button :loading="buttonLoading" type="primary" size="large" @click="handleSubmt">
                            {{ ruleForm.authStatus === 0 ? "提交审核" : "重新认证" }}
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </c-main-template>
    <c-agreement ref="cAgreementRef" @change="ruleForm.manual = true" />
</template>
<script setup>

import { ref, computed, onMounted, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import cAgreement from "./components/Agreement.vue";
import cBusinessLicense from "@/components/Upload/BusinessLicense.vue";
import { enterpriseType } from "@/utils/status.js";
import { deepClone, currentTime } from "@/utils/index.js";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const buttonLoading = ref(false);
const ruleFormRef = ref();
const ruleForm = ref({
    manual: false,
    authStatus: 0,
});
const cAgreementRef = ref();
const time = ref("");
const disabled = computed({
    get: () => {
        // <!-- 0-未认证，1-认证中，2-已认证，3=已驳回 -->
        return ruleForm.value.authStatus === 1 ? true : false;
    },
});
onMounted(() => {
    getByInfo();
});
const onDraftSave = () => {
    const data = JSON.stringify(ruleForm.value);
    proxy.$post({ url: "/draft/save", data: { business: 0, data } }).then(() => {
        time.value = currentTime();
    });
};

const handleSelectByName = () => {
    if (!ruleForm.value.name) {
        ElMessage.warning("请输入企业名称!");
        return;
    }
    loading.value = true;
    proxy
        .$get({
            url: "/seller/getBusinesssInfoByKeyword",
            params: {
                keyword: ruleForm.value.name,
            },
        })
        .then(
            (res) => {
                const fields = [
                    "name",
                    "type",
                    "creditno",
                    "legal",
                    "registerCapital",
                    "addressDetails",
                    "establishDate",
                    "businessScope",
                    "mobile",
                    "certificatePicPath",
                ];
                for (let i = 0; i < fields.length; i++) {
                    if (res[fields[i]]) {
                        ruleForm.value[fields[i]] = res[fields[i]];
                    }
                }
                loading.value = false;
            },
            () => {
                loading.value = false;
            }
        );
};
const getByInfo = () => {
    loading.value = true;
    proxy.$post({ url: "/draft/get", data: { business: 0 } }).then((res) => {
        if (res && res.data) {
            ruleForm.value = JSON.parse(res.data);
            time.value = res.time;
            loading.value = false;
        } else {
            proxy.$get({ url: "/seller/detail" }).then((user) => {
                if (user.dealerInfo) {
                    user.dealerInfo.manual = false;
                    user.dealerInfo.email = user.email;
                    user.dealerInfo.authStatus = user.authStatus;
                    ruleForm.value = user.dealerInfo;
                }
                loading.value = false;
            });
        }
    });
};
const handleSubmt = () => {
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            const data = deepClone(ruleForm.value);
            if (!data.manual) {
                ElMessage.warning("请查看并同意企业认证协议!");
                return;
            }
            // 0-未认证，1-认证中，2-已认证，3=已驳回
            let url = {
                0: "/sellerInfo/certification",
                2: "/sellerInfo/anewCertification",
                3: "/sellerInfo/anewCertification",
            }[data.authStatus];
            buttonLoading.value = true;
            proxy.$post({ url, data }).then(
                (res) => {
                    ElMessage.success("操作成功");
                    getByInfo();
                    buttonLoading.value = false;
                },
                () => {
                    buttonLoading.value = false;
                }
            );
        }
    });
};

const handleOpenManual = () => {
    cAgreementRef.value.handleOpen();
};

const rules = ref({
    name: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
    creditno: [
        { required: true, message: "请输入统一社会编码", trigger: "blur" },
    ],
    type: [{ required: true, message: "请选择企业类型", trigger: "change" }],
    legal: [{ required: true, message: "请输入法人", trigger: "blur" }],
    email: [{ required: true, message: "请输入邮件", trigger: "blur" }],
    mobile: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
    registerCapital: [
        { required: true, message: "请输入注册资本", trigger: "blur" },
    ],
    establishDate: [
        { required: true, message: "请选择成立日期", trigger: "change" },
    ],
    addressDetails: [
        { required: true, message: "请输入注册地址", trigger: "blur" },
    ],
    certificatePicPath: [
        { required: true, message: "请上传营业执照", trigger: "change" },
    ],
});
</script>
<style lang="less" scoped>
:deep(.el-input--large.enterprise-name .el-input__wrapper) {
    border-radius: var(--el-input-border-radius) 0px 0px
        var(--el-input-border-radius);
}
.upload_tips {
    font-size: 14px;
    color: #8d9297;
}

.enterprise-select {
    background: #3a85f5;
    font-weight: 400;
    color: #ffffff;
    padding: 0px 20px;
    height: 40px;
    font-size: 14px;
    border-radius: 0px 4px 4px 0px;
}
.enterprise-img {
    position: absolute;
    right: -25px;
    width: 16px;
    height: 16px;
}
.title {
    font-size: 14px;
    font-weight: 500;
    color: #26282a;
    margin-bottom: 16px;
}
.save-time {
    font-size: 12px;
    color: #9a9a9a;
}
.living-example {
    position: relative;
}
.living-example_img {
    width: 90px;
    height: 90px;
    border: 1px dashed rgba(0, 0, 0, 0.17);
}
.living-example_title {
    position: absolute;
    left: 0;
    right: 0;
    font-size: 12px;
    font-weight: 400;
    color: #8c8c8c;
    text-align: center;
}
.living-example_del {
    position: absolute;
    top: -5px;
    right: -5px;
    color: red;
    border-radius: 30px;
    z-index: 9999;
}
.seal-sample {
    margin-right: 30px;
    .seal-example_img {
        width: 110px;
        height: 110px;
    }
    .seal-sample_upload {
        display: flex;
        justify-content: center;
    }
    .seal-sample_title {
        font-size: 12px;
        font-weight: 400;
        color: #8c8c8c;
        text-align: center;
    }
}
</style>